<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <style>
        .red{
            color: #cf4444;
        }
        .main{
            background-color: #f7f7f7;
            /* 80px 为了内容不被底部区域盖住 */
            margin: 12px 11px 80px 11px;
        }
        *{margin: 0px;padding: 0px;}
        ul {
            width: 100%;
            list-style-type: none;
            position: fixed;
            bottom: 2px;
            border-top: 1px solid #ccc;
        }
        ul > li{
            float: left;
            width: 20%;
        }

        ul li img{
            width: 100%;
            height: 100%;
        }
        .pay{
            height: 60px;
            display: flex;
            padding: 0px 11px;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
        }
        .pay .left span:nth-child(2){
            font-size: 20px;
        }
        .pay .right a{
            display: inline-block;
            width: 91px;
            height: 35px;
            background-image: linear-gradient(#6fc2aa 5%,#54b196 100%);
            border-radius: 3px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }
        .panel{
            background-color: #fff;
            border-radius: 3px;
            padding: 10px 11px;
        }
        .first{
            display: flex;
            align-items: center;
            height: 200px;
        }
        .location{
            width: 60px;
            height: 60px;
            background-color: red;
        }
        .info{
            background-color: yellow;
            flex: 1;
            height: 50px;
            padding: 10px 11px;
        }
        .info .user{
            display: flex;
            background-color: orange;
        }
        .info h5{
            width: 55px;
        }
        
        .more{
            width: 44px;
            height: 44px;
            background-color: blue;
            line-height: 44px;
            font-size: 18px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="pay">
        <div class="left">合计：<span class="red">￥</span><span class="red">266.00</span></div>
        <div class="right"><a href="#">去支付</a></div>
    </div>
    <div class="main">
        <div class="first panel">
            <div class="location">111</div>
            <div class="info">
                <div class="user">
                    <h5>聂哥</h5>
                    <span>18682395282</span>
                </div>
            </div>
            <div class="more">></div>
        </div>
        <div class="second panel"></div>
    </div>
    <footer>
        <ul>
            <li><img src="./images/index.png"></li>
            <li><img src="./images/jd.png"></li>
            <li><img src="./images/classify.png"></li>
            <li><img src="./images/login.png"></li>
            <li><img src="./images/car.png"></li>
        </ul>
    </footer>
</body>
</html>